<template>
    <div>
        <cvue-dialog
            :dialogVisible="selectDeviceVisible"
            title="请选择要下发数据的设备"
            :isShowFoot="true"
           
            @handleOpen="openDialog"
            @closeDialog="closeDialog"
            @confirmDialog="confirmDialog"
            @handleClose="closeDialog"
            >
            <div  slot="dialogBody">
                <div class="left-con">
                    <el-tree
                        :props="{
                            children: 'children',
                            label: 'name'
                        }"
                        :default-expand-all="false"
                        :expand-on-click-node="false"
                        :highlight-current="true"
                        :data="buildTree"
                        @node-click="nodeClick"
                        >
                    </el-tree>
                </div>
                <div class="right-con">
                     <el-table
                        ref="deviceTable"
                        :data="deviceList"
                        tooltip-effect="dark"
                        style="width: 100%"

                          @selection-change="selectionChange"
                        @row-click="rowClick"
                        >
                        <el-table-column
                        type="selection"
                        width="55">
                        </el-table-column>
                        <el-table-column
                        width="200"
                        label="设备编号"
                        prop="deviceSerialNum"
                        >
                            <template  slot-scope="scope">
                                 <div v-if="scope.row.deviceCode == 'wifiType'">{{scope.row.mac}}</div>
                                <div v-else>
                                   {{scope.row.deviceSerialNum}}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                     
                        label="设备类型"
                      
                        >
                        <template slot-scope="scope">
                                <div v-if="scope.row.deviceCode == 'wifiType'">WIFI</div>
                                <div v-else>
                                   {{scope.row.deviceTypeName}}
                                </div>
                            </template>
                      
                        </el-table-column>
                        <el-table-column
                        prop="remark"
                        label="备注"
                       >
                        </el-table-column>
                        <el-table-column
                        prop="deviceStatusDesc"
                        label="设备状态"
                        >
                        </el-table-column>
                    </el-table>
                    <!-- <div>{{selectedGroup}}</div>
                   <div>{{selectedDevice}}</div> -->
                </div>
                <div class="clear"></div>
            </div>
        </cvue-dialog>
    </div>
</template>
<script>
import cvueDialog from '@/components/cvue-dialog'
export default {
    components: {
        cvueDialog
    },
    computed: {
        selectDeviceVisible () {
            return this.$store.state.dorm.selectDeviceVisible
        },
        buildTree () {
           return this.$store.state.dorm.buildTree
        },
        schoolId () {
          return this.$store.state.common.cookiesObj.schoolId
        },
        deviceList () {
          return this.$store.state.dorm.deviceList
        },
        selectedDevice () {
            return this.$store.state.dorm.selectedDevice
        },
        selectedGroup () {
            return this.$store.state.group.selectedGroup
        },
        curDorm () {
            return this.$store.state.dorm.curDorm
        }
    },
    data () {
        return {
        
        }
    },
    methods: {
       
        openDialog () {
           this.$store.state.dorm.deviceList = []
            this.$store.dispatch('dorm/getDormTree', {
              SchoolId: this.schoolId
            //   DormitoryId: this.curDorm.id
            })
        },
        confirmDialog () {
            var params = {
                    dormitoryId: this.curDorm.id,
                    groupIds: this.selectedGroup.map(obj => obj.id),
                    taskCode: new Date().getTime() + '',
                    // taskContent: "string",
                    // taskRemark: "string",
                    personType: 1,
                    schoolId: this.schoolId,
                    list: this.selectedDevice.map(obj => {
                        return {
                             deviceSerialNum: obj.deviceSerialNum,
                            deviceType: obj.deviceType,
                            deviceTypeName: obj.deviceTypeName
                        }
                    })
            }
            
            this.$store.dispatch('dorm/importGroupPerson', params).then(res => {
                if (res.status == 200) {
                    this.closeDialog()
                    this.$message.success('已下发数据')
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(() => {
                this.$message.error('下发数据失败')
            })  
        },
        closeDialog () {
            this.$store.state.dorm.selectDeviceVisible = false
        },
        nodeClick (data, node) {
          console.log(data, node)
          var params = {
            SchoolId: this.schoolId,
            DetailId: data.detailId,
            DeviceCodes: 'vmsType,hikType'
          }
          this.$store.dispatch('dorm/getDeviceList', params)
        },

         selectionChange (val) {
           console.log(val)
           this.$store.state.dorm.selectedDevice = val
        },
       
        rowClick (row, column) {
          this.$refs.deviceTable.toggleRowSelection(row)
        }
    }
}
</script>
<style scoped>
.left-con{float: left;width: 30%;}
.right-con{float: left;width: 70%;}
.clear{clear: both;}
</style>
